<!-- 特别修正限额配置页面  -->
<template>
    <div style="padding: 30px;">
        <el-row :gutter="20">
            <el-col :span="5">
                <div style="height: 500px; overflow-y: auto; margin-left: 25px" class="custom-box">
                    <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" node-key="id"
                        :highlight-current="true" :expand-on-click-node="false" :default-expanded-keys="expandedKeys"
                        class="custom-tree"></el-tree>
                </div>
            </el-col>
            <el-col :span="19">
                <TCollapse title="查询结果">
                    <div style="text-align: right;margin-bottom: 10px;">
                        <el-button class="pms-button-primary" @click="addinfo">新增</el-button>
                        <el-button class="pms-button-primary" @click="editinfo">编辑</el-button>
                        <el-button class="pms-button-primary" @click="deleteinfo">删除</el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50">
                        </el-table-column>
                        <el-table-column type="index" width="50" label="序号" align="center">
                        </el-table-column>
                        <el-table-column prop="orgName" label="所属组织" width="180" align="center">
                        </el-table-column>
                        <el-table-column prop="increaseMoney" label="调增总金额阈值(元)" width="180" align="center">
                        </el-table-column>
                        <el-table-column prop="reduceMoney" label="调减总金额阈值(元)" width="180" align="center">
                        </el-table-column>
                    </el-table>
                </TCollapse>
            </el-col>
        </el-row>
        <el-dialog :title="title" :visible.sync="showDialog" class="pms-zr-dialog" width="45%"
            :before-close="closeDialog">
            <el-form ref="form" :model="form" label-width="130px" size="mini" :inline="true"
                style="margin-bottom: 10px;">
                <el-row :gutter="24" style="margin-bottom: 10px">
                    <el-col :span="12">
                        <el-form-item label="行政区域" style="width: 80%;">
                            <el-input v-model="form.areaName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属组织" style="width: 80%;">
                            <el-input v-model="form.orgName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-bottom: 10px">
                    <el-col :span="12">
                        <el-form-item label="调增总金额阈值(元)" style="width: 80%;">
                            <el-input v-model="form.increaseMoney" type="number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="调减总金额阈值(元)" style="width: 80%;">
                            <el-input v-model="form.reduceMoney" type="number"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="width: 100%;text-align: center;">
                <el-button class="pms-zr-button-primary" @click="saveinfo">保 存</el-button>
                <el-button class="pms-zr-button-primary" @click="closeDialog()">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 删除前弹框 -->
        <el-dialog title="确定？" :visible.sync="showDeleteDialog" class="pms-zr-dialog" width="35%">
            <p style="text-align: center;">请确认是否需要删除该配置，点击确认按钮删除配置信息，点击取消按钮保留配置信息。</p>
            <div slot="footer" class="dialog-footer" style="width: 100%;text-align: center;">
                <el-button class="pms-zr-button-primary" @click="deleteinfoSetting">确 定</el-button>
                <el-button class="pms-zr-button-primary" @click="showDeleteDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getConfigAcquisitionTreeList,
    getConfigTableData,
    saveConfigTableData,
    deleteConfigTableData
} from '@/api/speciaCorrection/index'
export default {
    name: "SpeciaCorrection",
    data() {
        return {
            expandedKeys: [],
            defaultProps: {
                children: "children",
                label: "label",
            },
            treeList: [],
            tableData: [],
            showDialog: false,
            title: "新增审批限额配置信息",
            form: {
                areaName: '中国铁塔',
                orgName: '',
                increaseMoney: '',
                reduceMoney: ''
            },
            searchCode: '',
            multipleSelection: [],
            showDeleteDialog: false
        };
    },
    created() {
        this.getTreeList()
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        async getTreeList() {
            const { code, data } = await getConfigAcquisitionTreeList({})
            if (+code === 200) {
                this.treeList = data
                if (this.treeList?.length > 0) {
                    this.expandedKeys.push(this.treeList[0].id);
                }
            }
        },
        addinfo() {
            if (!this.searchCode) {
                this.$message.warning("请选择左侧组织树!");
                return;
            }
            this.showDialog = true;
            this.title = "新增审批限额配置信息";
        },
        editinfo() {
            if (!this.searchCode) {
                this.$message.warning("请选择左侧组织树!");
                return;
            }
            if (!this.multipleSelection?.length) {
                this.$message.warning("请勾选一行!");
                return;
            }
            this.form = { ...this.multipleSelection[0], areaName: '中国铁塔' };
            this.showDialog = true;
            this.title = "编辑审批限额配置信息";
        },
        async deleteinfo() {
            if (!this.multipleSelection?.length) {
                this.$message.warning("请勾选一行!");
                return;
            }
            this.showDeleteDialog = true;
        },
        async deleteinfoSetting() {
            const { code } = await deleteConfigTableData({ orgId: this.searchCode })
            if (+code === 200) {
                this.$message.success("删除成功!");
                this.getList()
                this.showDeleteDialog = false;
            }
        },
        handleNodeClick(data, node) {
            this.form.orgName = data.label;
            this.searchCode = data.id;
            this.getList()
        },
        async saveinfo() {
            const params = {
                orgId: this.searchCode,
                increaseMoney: this.form.increaseMoney,
                reduceMoney: this.form.reduceMoney,
            }
            const { code } = await saveConfigTableData(params)
            if (+code === 200) {
                this.$message.success("保存成功!");
                this.closeDialog()
                this.getList()
            }
        },
        async getList() {
            const { code, data } = await getConfigTableData({ orgId: this.searchCode })
            if (+code === 200) {
                this.tableData = data
            }
        },
        closeDialog() {
            this.showDialog = false;
            this.form.increaseMoney = '';
            this.form.reduceMoney = '';
        }
    },
}
</script>

<style lang="scss" scoped>
.custom-tree ::v-deep .el-tree-node.is-current>.el-tree-node__content {
    background-color: #ffffff;
    color: #eb4b4b;
}

.custom-box {
    border: 1px solid #e5e5e5;
    padding: 10px;
}

::v-deep .el-tree-node__label {
    font-size: 12px;
}
</style>